<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<script src="lib/react.development.js"></script>
	<script src="lib/react-dom.development.js"></script>
</head>
<body>
	<div id="app"></div>
</body>
<script>
	const root = ReactDOM.createRoot(document.querySelector("#app"));
	{
		// 第一个参数是标签的名字,是虚拟DOM对象中的type属性值。
		// console.log(React.createElement("h1"));// {type:"h1"}
	}
	{
		// 第二个参数是一个对象（省略）
		// console.log(React.createElement("h1",{
		// 	id:"one",
		// 	className:"my"
		// }));// {type:"h1",props:{id:"one",className:"my"}}
	}
	{
		// 从第三个参数开始即是该元素所包裹的内容。
		// console.log(React.createElement("h1",{
		// 	id:"one",
		// 	className:"my"
		// },"你现在过的还好吗？"));// // {type:"h1",props:{id:"one",className:"my",children:"你现在过的还好吗"}}
	}
	{
		// console.log(React.createElement("h1",{
		// 	id:"one",
		// 	className:"my"
		// },"one","two","three"));// {type:"h1",props:{id:"one",className:"my",children:["one","two","three"]}}
	}
	{
		// console.log(React.createElement("h1",{
		// 	id:"one",
		// 	className:"my"
		// },["one","two","three"]));// {type:"h1",props:{id:"one",className:"my",children:["one","two","three"]}}
	}
	{
		// console.log(React.createElement("h1",null,["one","two","three"]));
	}
	{
		const span1 = React.createElement("span",null,"span1");
		const span2 = React.createElement("span",null,"span2");
		const div = React.createElement("div",null,[span1,span2]);
		root.render(div);
	}
	// root.render();
</script>
</html>